<template>
  <v-layout title="查看客户信息">
    <el-row type="flex" justify="center">
      <el-col :lg="12" :md="14" :sm="24" class="confirm">

        <v-form
          ref="form1"
          :form-title="formTitle"
          :form-data="formData"
          label-width="120px"
        />
        <!--联系人列表-->
        <linkman
          v-if="contacts_list.length"
          :linkman_list="contacts_list"
        />

        <!--开票信息选择变化-->
        <el-form label-width="120px" size="mini">
          <el-form-item label="对应开票信息: ">
            <el-button v-if="!ListInvoiceInformation" type="primary" size="mini" @click="createInvoice">创建开票信息</el-button>
          </el-form-item>
        </el-form>

        <el-card v-if="ListInvoiceInformation">
          <v-form
            ref="form2"
            :form-title="invoiceSelectTitle"
            :form-data="formData"
            label-width="120px"
          >
            <template v-for="item in 2" slot-scope="props" :slot="'upload'+item">
              <el-form-item
                :label="props.info.cn"
              >
                <span>{{ props.info.info }}</span>
                <el-button size="mini" type="info">查看</el-button>
              </el-form-item>
            </template>
          </v-form>
          <div class="pdb15">
            <div class="flex">
              <label class="label">其他汇款银行</label>
              <div style="flex:1">
                <template v-for="(list,index) in ListInvoiceInformation">
                  <div :class="{mt15:index!==0}">
                    <el-input
                      v-model="list.remitBank"
                      size="mini"
                      class="ipt1 m0"
                      :disabled:="true"
                      placeholder="请输入汇款银行"
                    >
                      <!--<el-button slot="append" v-if="index===0&&isEdit" icon="el-icon-plus"-->
                      <!--@click="addBankInfo(index)"></el-button>-->
                      <!--<el-button slot="append" v-else-if="index>0&&isEdit" icon="el-icon-minus"-->
                      <!--@click="delBankInfo(index)"></el-button>-->
                    </el-input>
                  </div>
                </template>

              </div>
            </div>
          </div>
          <el-row type="flex" justify="end">

            <el-button size="mini" type="primary" @click="modifyInvoice">前往开票信息修改</el-button>
          </el-row>
        </el-card>

        <!--汇款银行信息-->

        <!--<v-resetConfirmBtn-->
        <!--@reset="reset"-->
        <!--@confirm="confirm"-->
        <!--/>-->
      </el-col>
    </el-row>
    <el-dialog :visible.sync="dialogTableVisible" title="pdf">
      <iframe :src="viewSrc" style="width:100%;min-height:60vh" frameborder="0"/>
    </el-dialog>
  </v-layout>

</template>

<script>
import { deepClone } from '@/utils'
import linkman from '../components/contact_list'
import tags from '@/views/components/tags'

export default {
  components: {
    linkman,
    tags
  },
  data() {
    return {
      id: '',
      title: '',
      isModifyInvoice: false,
      dialogTableVisible: false,
      viewSrc: '',
      formTitle: [
        {
          cn: '客户名称',
          en: '客户名称',
          disabled: true
        },
        {
          cn: '客户简称',
          en: '客户简称',
          disabled: true
        },
        {
          cn: '电话',
          en: '客户电话',
          disabled: true
        },
        {
          cn: '客户类型',
          en: '客户类型',
          type: 'select',
          disabled: true,
          list: [
            {
              label: '最终客户',
              value: '1'
            },
            {
              label: '渠道客户',
              value: '2'
            },
            {
              label: '竞争对手',
              value: '3'
            }
          ]
        },
        {
          cn: '客户状态',
          en: '客户状态',
          type: 'select',
          disabled: true,
          list: [
            {
              label: '潜在客户',
              value: '潜在客户'
            },
            {
              label: '初步接触',
              value: '初步接触'
            },
            {
              label: '持续跟进',
              value: '持续跟进'
            },
            {
              label: '成交客户',
              value: '成交客户'
            },
            {
              label: '忠诚客户',
              value: '忠诚客户'
            },
            {
              label: '无效客户',
              value: '无效客户'
            }
          ]
        },
        {
          cn: '客户性质',
          en: '客户性质',
          type: 'select',
          disabled: true,
          list: [
            {
              label: '企业客户',
              value: '企业客户'
            },
            {
              label: '个人客户',
              value: '个人客户'
            },
            {
              label: '政府事业单位',
              value: '政府事业单位'
            }
          ]
        },
        {
          cn: '客户分级',
          en: '客户分级',
          disabled: true,
          type: 'select',
          list: [
            {
              label: '小型',
              value: '小型'
            },
            {
              label: '中型',
              value: '中型'
            },
            {
              label: '大型',
              value: '大型'
            }
          ]
        },
        {
          cn: '客户行业',
          en: '客户行业',
          disabled: true,
          type: 'select',
          list: [
            {
              label: '金融',
              value: '金融'
            },
            {
              label: '电信',
              value: '电信'
            },
            {
              label: '教育',
              value: '教育'
            },
            {
              label: '高科技',
              value: '高科技'
            },
            {
              label: '政府',
              value: '政府'
            },
            {
              label: '制造业',
              value: '制造业'
            },
            {
              label: '服务业',
              value: '服务业'
            },
            {
              label: '能源',
              value: '能源'
            },
            {
              label: '零售',
              value: '零售'
            },
            {
              label: '媒体',
              value: '媒体'
            },
            {
              label: '娱乐',
              value: '娱乐'
            },
            {
              label: '咨询',
              value: '咨询'
            },
            {
              label: '非营利性事业',
              value: '非营利性事业'
            },
            {
              label: '公用事业',
              value: '公用事业'
            },
            {
              label: '其他',
              value: '其他'
            }
          ]
        },
        {
          cn: '重要程度',
          en: '重要程度',
          disabled: true,
          type: 'select',
          list: [
            {
              label: '一星',
              value: '一星'
            },
            {
              label: '二星',
              value: '二星'
            },
            {
              label: '三星',
              value: '三星'
            },
            {
              label: '四星',
              value: '四星'
            },
            {
              label: '五星',
              value: '五星'
            }
          ]
        },
        {
          cn: '客户生日',
          en: '客户生日',
          disabled: true,
          type: 'select',
          birthday: true,
          list: [
            {
              label: '公历',
              value: '公历'
            },
            {
              label: '农历',
              value: '农历'
            }
          ]
        },
        // {
        //     cn: '国家',
        //     en: 'nation',
        //     disabled: true,
        //     type: 'select',
        //     list: [
        //         {
        //             label: '中国',
        //             value: '1',
        //         },
        //         {
        //             label: '其他',
        //             value: '2',
        //         },
        //     ]
        // },
        {
          cn: '客户地址',
          en: '地址',
          disabled: true
          // editable: true,
        },
        {
          cn: '详细地址',
          en: 'full_address',
          editable: true,
          disabled: true
        },
        {
          cn: '客户来源',
          en: '客户来源',
          disabled: true
        },
        {
          cn: '客户官网',
          en: '客户官网',
          disabled: true
        },
        {
          cn: '客户简介',
          en: '客户简介',
          disabled: true
        },
        {
          cn: '创建人',
          en: '创建人',
          disabled: true
        },
        {
          cn: '图片',
          en: '图片',
          disabled: true
        },
        {
          cn: '文件',
          en: '文件',
          disabled: true
        },
        {
          cn: '备注',
          en: '备注',
          type: 'textarea',
          disabled: true
        }
      ],
      formData: {},

      contacts_list: [],

      originData: {},

      invoiceCompanyDetail: {},
      invoice_company: [
        {
          name: '公司一'
        },
        {
          name: '公司二'
        }
      ],
      originInvoiceCompany: [],

      invoiceSelectTitle: [
        {
          cn: '开票公司名称',
          en: 'invoice_company',
          disabled: true
        },
        {
          cn: '纳税人识别号',
          en: 'number',
          disabled: true
        },
        {
          cn: '公司地址',
          en: 'company_address',
          disabled: true
        },
        {
          cn: '开户行',
          en: 'account_bank',
          disabled: true
        },
        {
          cn: '账号',
          en: 'account',
          disabled: true
        },
        {
          cn: '发票类别',
          en: 'Invoice_category',
          disabled: true
        },
        {
          cn: '营业执照',
          en: 'business_license',
          type: 'upload1',
          info: '*****.pdf'
        },
        {
          cn: '一般纳税人证明',
          en: 'taxpayer_certificate',
          type: 'upload2',
          info: '*****.pdf'
        }
      ],
      ListInvoiceInformation: null,

      bankInfoTitle: [
        {
          cn: '汇款银行信息',
          en: 'bank_infos',
          editable: true,
          disabled: true
        }
      ],
      ListBankInformation: [
        {
          remitBank: '汇款银行1'
        },
        {
          remitBank: '汇款银行2'
        }
      ],

      name: ''// 客户名称
    }
  },
  created() {
    this.id = this.$route.query.id
    this.name = this.$route.query.name
  },
  mounted() {
    this.getClientDetail()
  },
  methods: {

    getClientDetail() {
      const data = {
        id: this.id,
        '客户名称': this.name
      }
      this.$get('action/Client/qryOp', data)
        .then(res => {
          this.contacts_list = res.data.ListContacts.map(item => {
            const obj = {}
            obj.name = item.姓名
            obj.phone = item.联系电话 && JSON.parse(item.联系电话)[0].telNum || ''
            obj.date = item.生日
            obj.duty = item.职务
            obj.level = item.级别
            return obj
          })
          this.formData = res.data.PrivateClient || {}

          this.formData.客户电话 = this.formData.客户电话 && JSON.parse(this.formData.客户电话)[0].telNum || ''

          this.invoice_company = res.data.ListInvoiceInformation
          this.bankInfoData = res.data.ListBankInformation
        })
    },

    createInvoice() {
      this.$router.push({
        name: 'invoice_info.modify'
      })
    },

    // 删除开票信息子公司
    onCompanyDel(val, index) {
      console.log(val, index)
      this.$post('url', val.id)
        .then(res => {
          this.invoice_company.splice(index, 1)
        })
    },
    // 点击开票信息
    onCompanyClick(val) {
      console.log(val)
      this.invoiceCompanyDetail = val
      this.originInvoiceCompany = this.$deepClone(val)
    },
    // 新增/修改开票信息
    modifyInvoice() {
      this.$router.push({
        name: 'private.check_info',
        query: {
          id: this.ListInvoiceInformation.id
        }
      })
    },

    // addBankInfo(index) {
    //     console.log(index)
    //     this.bankInfoData.push(
    //         {
    //             remitBank: '',
    //             remitAccount: ''
    //         }
    //     )
    // },
    // delBankInfo(index) {
    //     console.log(index)
    //     this.bankInfoData.splice(index, 1)
    // },

    back() {
      this.$router.go(-1)
    },
    myUpload() {

    },
    handleAvatarSuccess() {

    }

  }
}
</script>

<style scoped>
    span + button {
        margin-left: 15px;
    }

    .el-button + .el-button {
        margin-left: 15px

    }

    .flex {
        display: flex;
        flex-wrap: nowrap;
    }

    .label {
        width: 120px;
        padding-right: 12px;
        font-size: 14px;
        text-align: right;
        color: #606266;
        line-height: 30px;
    }

    .m0 {
        margin: 0;
    }
</style>
